/*
 * @Author: 灰灰
 * @Date: 2021-12-31 11:47:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 21:23:59
 * @Description: 
 */

export default {
  data() {
    return {
      chartOption: {
        //调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。 
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        // 标题配置
        title: {
          text: '', //主标题
          textStyle: {
            color: '#333',
            fontSize: 15,
            fontWeight: 'bold'
          },
          subtext: '', // 副标题
          subtextStyle: {}
        },
        // 图例类型
        legend: {
          // left: 'center', // 图例组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
          // top: '', //图例组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
          // right: '', // 图例组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
          data: []
        },
        // 提示框组件
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型  item-数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用，axis-坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。none-什么都不触发。
        },
        // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
        toolbox: {
          show: false, //是否显示工具栏组件。
          orient: 'horizontal', //工具栏 icon 的布局朝向。horizontal, vertical
          itemSize: 15, //工具栏 icon 的大小。
          showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题。
        },
        // 坐标系的位置 可以是{}，也可以是[]，[]用于多个坐标系的位置大小等配置
        grid: {
          // left: '', // 20, 10%, grid 组件离容器左侧的距离
          // top: '', // grid 组件离容器上侧的距离
          // right: '', // grid 组件离容器右侧的距离
          // bottom: '', // grid 组件离容器下侧的距离
          // width: '', //grid 组件 宽度
          // height: '', //grid 组件 高度
        },
        // 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响
        dataZoom: { // 默认开启 区域缩放
          type: 'inside'
        },
        // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
        xAxis: {
          // show: true, // 是否显示 x 轴。
          type: 'category', // 坐标轴类型，value-数值轴，适用于连续数据。category-类目轴，适用于离散的类目数据， time- 时间轴，log- 对数轴
          boundaryGap: true, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：boundaryGap: ['20%', '20%']
          // gridIndex: 1, //x 轴所在的 grid 的索引，默认位于第一个 grid。
          // position: 'bottom', // x 轴的位置 top、bottom
          // name: '名称', // 坐标轴名称。
          // nameLocation: 'end', // 坐标轴名称显示位置。 start、center、middle、end
          // nameTextStyle: {}, // 坐标轴名称的文字样式。
          // nameGap: 15, //坐标轴名称与轴线之间的距离。
          // nameRotate: 10, //坐标轴名字旋转，角度值。
          // inverse: false, // 是否是反向坐标轴。
          // min: 0, //坐标轴刻度最小值。
          // max: 0, //坐标轴刻度最大值。
          splitLine: { // 坐标轴在grid 区域中的分隔线
            show: false, // 是否显示分隔线
            // interval: 0, // 分割线显示间隔
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            show: true, // 是否显示刻度标签
            interval: 0, // 刻度标签 显示间隔 
            formatter: '{value}', //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
            // inside: false, // 刻度标签 是否朝内，默认朝外 false
            // rotate: 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
            // color: 'red', // 刻度标签文字的颜色 
            // fontSize: 12, // 刻度标签文字的大小
            // align: 'center', // 文字水平对齐方式，默认自动。
          },
          axisTick: { // 坐标轴刻度相关设置。
            show: true, //是否显示坐标轴刻度。
          },
          axisLine: { //坐标轴轴线相关设置。
            show: true, //是否显示坐标轴轴线。
            lineStyle: { // 坐标轴轴线的 样式
              color: '#333'
            }
          },
          data: []
        },
        yAxis: {
          show: true, // 是否显示 y 轴。
          type: 'value', // 坐标轴类型，value-数值轴，适用于连续数据。category-类目轴，适用于离散的类目数据，time- 时间轴，log- 对数轴
          // gridIndex: 1, //y 轴所在的 grid 的索引，默认位于第一个 grid。
          // position: 'left', // x 轴的位置 left、right
          // name: '名称', // 坐标轴名称。
          // nameLocation: 'end', // 坐标轴名称显示位置。 start、center、middle、end
          // nameTextStyle: {}, // 坐标轴名称的文字样式。
          // nameGap: 15, //坐标轴名称与轴线之间的距离。
          // nameRotate: 10, //坐标轴名字旋转，角度值。
          // inverse: false, // 是否是反向坐标轴。
          // min: 0, //坐标轴刻度最小值。
          // max: 0, //坐标轴刻度最大值。
          splitLine: { // 坐标轴在grid 区域中的分隔线
            show: false, // 是否显示分隔线
            // interval: 0, // 分割线显示间隔
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            show: true, // 是否显示刻度标签
            interval: 0, // 刻度标签 显示间隔 
            formatter: '{value}', //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
            // inside: false, // 刻度标签 是否朝内，默认朝外 false
            // rotate: 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
            // color: 'red', // 刻度标签文字的颜色 
            // fontSize: 12, // 刻度标签文字的大小
            // align: 'center', // 文字水平对齐方式，默认自动。
            verticalAlign: 'middle', //文字垂直对齐方式，默认自动。top,middle,bottom
          },
          axisTick: { // 坐标轴刻度相关设置。
            show: true, //是否显示坐标轴刻度。
          },
          axisLine: { //坐标轴轴线相关设置。
            show: true, //是否显示坐标轴轴线。
            lineStyle: { // 坐标轴轴线的 样式
              color: '#333'
            }
          },
          data: []
        },
        series: [
          // {
          //   data: [150, 230, 224, 218, 135, 147, 260],
          //   type: 'line'
          // }
        ]
      },
      // 折线 配置
      lineOption: {
        name: '', //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
        type: 'line',
        smooth: false, //是否平滑曲线显示。
        // yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
        lineStyle: {
          // color: '#000',//线的颜色。
          width: 2, //线宽。
          type: 'solid', //线的类型。solid\dashed\dotted
          // dashOffset: 10, //用于设置虚线的偏移量，可搭配 type 指定 dash array 实现灵活的虚线效果。
        },
        // 区域填充样式。设置后显示成区域面积图。
        // areaStyle: {
        //   color: '#000'
        // },
        // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
        label: {
          show: false, //是否显示标签。
          position: 'top', // 标签的位置
          distance: 15, //距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
          rotate: 0, //标签旋转。从 -90 度到 90 度。正值是逆时针。
          // offset: [0, 0], //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
          // fontSize: 12, //文字的字体大小。
          align: 'center', // 文字水平对齐方式，默认自动。left,center,right
          // verticalAlign: '',//文字垂直对齐方式，默认自动。 top,middle,bottom
          // formatter: '', // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
        },
        // 折线端点的标签。
        endLabel: {
          show: false,
        },
        // 标签的视觉引导线配置。
        labelLine: {
          show: false,
        },
        // 图表标线。
        markLine: {},
        // 图表标注。
        markPoint: {},
        // 本系列特定的 tooltip 设定。
        tooltip: {},
        data: [],
      },

      // 柱状图 配置
      barOption: {
        name: '',
        type: 'bar',
        // barWidth: '', //柱条的宽度，不设时自适应。
        barMaxWidth: '40', //柱条的最大宽度。比 barWidth 优先级高。
        stack: '', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
        barGap: 0, //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
        barCategoryGap: '20%', //同一系列的柱间距离，默认为类目间距的20%，可设固定值
        large: false, // 是否开启大数据量优化，在数据图形特别多而出现卡顿时候可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。
        // largeThreshold: 1000, //开启绘制优化的阈值。
        label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
          show: false, //是否显示标签。
          rotate: 0, // 标签旋转。从 -90 度到 90 度。正值是逆时针。
          // offset: [0, 0], //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
          // fontSize: 12,// 文字的字体大小。
          align: 'center', //文字水平对齐方式，默认自动,left,center,right
          // verticalAlign: '', //文字垂直对齐方式，默认自动。 top,middle,bottom
          // formatter: '',
        },
        // 本系列特定的 tooltip 设定。
        tooltip: {},
        data: [],
      },
      // 饼图 配置
      pieOption: {
        name: '',
        type: 'pie',
        radius: ['0', '70%'], //饼图的半径
        center: ['50%', '50%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。 支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
        showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆。
        emptyCircleStyle: {}, // 占位圆样式。
        // 标签的视觉引导线配置。在 label 位置 设置为'outside'的时候会显示视觉引导线。
        labelLine: {
          show: true
        },
        // 图形样式。
        itemStyle: {
          borderRadius: 0,
          borderColor: '#fff', //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
          borderWidth: 0, //描边线宽。为 0 时无描边。
        },
        // length: 10, //视觉引导线第一段的长度。
        // length2: 30, // 视觉引导项第二段的长度。
        // smooth: true, //是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度.
        selectedMode: false, //选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。
        clockwise: true, //饼图的扇区是否是顺时针排布。
        roseType: '', // 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
        // 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
        // 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
        data: []
      }
    }
  },
  methods: {
    configTitle(title) {
      Object.assign(this.chartOption.title, title);
    },
    configGrid(grid) {
      Object.assign(this.chartOption.grid, grid);
    },
    // 配置 图案类型
    configLegend(legend) {
      Object.assign(this.chartOption.legend, legend);
    },
    // 配置工具箱
    configToolbox(toolbox) {
      Object.assign(this.chartOption.toolbox, toolbox);
    },
    // 提示框组件
    configTooltip(tooltip) {
      Object.assign(this.chartOption.tooltip, tooltip);
    },
    // 配置缩放工具 type = inside || slider
    configDataZoom(dataZoom, type) {
      if (!dataZoom) return delete this.chartOption.dataZoom;
      if ((typeof dataZoom == 'object') && dataZoom.constructor == Object) {
        type && ['inside', 'slider'].includes(type) && (dataZoom = {
          type
        })
        Object.assign(this.chartOption, {
          dataZoom: dataZoom
        });
      }
      this.chartOption.dataZoom = dataZoom;
    },
    // 配置x坐标轴
    configXAxis(xAxis) {
      if ((typeof xAxis == 'object') && xAxis.constructor == Object) {
        // 当传入的是对象，就表示配置单个x坐标轴
        Object.assign(this.chartOption.xAxis, xAxis);
        return;
      }
      this.chartOption.xAxis = xAxis;
    },
    // 配置y坐标轴
    configYAxis(yAxis) {
      if ((typeof yAxis == 'object') && yAxis.constructor == Object) {
        // 当传入的是对象，就表示配置单个x坐标轴
        Object.assign(this.chartOption.yAxis, yAxis);
        return;
      }
      this.chartOption.yAxis = yAxis;
    },
    // 配置数据源
    configSeries(series) {
      this.chartOption.series = series;
    },
    // 生成折线图数据
    generateLineData(line) {
      let seriesLine;
      if (!((typeof line == 'object') && line.constructor == Object)) {
        line = {
          data: line
        }
      }
      seriesLine = Object.assign({}, this.lineOption, line);
      return seriesLine;
    },
    // 生成柱状图数据
    generateBarData(bar) {
      let seriesBar;
      if (!((typeof bar == 'object') && bar.constructor == Object)) {
        bar = {
          data: bar
        }
      }
      seriesBar = Object.assign({}, this.barOption, bar);
      return seriesBar;
    },
    // 生成饼图数据
    generatePieData(pie, onlyPie = true) {
      let seriesPie;
      if (!((typeof pie == 'object') && pie.constructor == Object)) {
        pie = {
          data: pie
        }
      }
      if (onlyPie) {
        // 只有饼图时，才删除下面这些字段
        const keys = ['yAxis', 'xAxis', 'dataZoom', 'legend.data'];
        this.$utils.util.delKeys(this.chartOption, keys);
      }

      seriesPie = Object.assign({}, this.pieOption, pie);
      return seriesPie;
    }
  }
}